<script setup>
import "./style.css";
import { ref } from "vue";
import VueTree from "../VueD3Tree/index.vue";
import { fakeData2 } from "./fakeData";

const treeData = ref(fakeData2);
</script>

<template>
  <div class="demo-main">
    <div>
      <h3>点击树节点收起、展开</h3>
      <div class="canvas-container">
        <VueTree
          :data="treeData"
          default-node-key="name"
          collapsed-way="clickTreeNode"
        />
      </div>
    </div>
    <div>
      <h3>自定义树节点折叠样式</h3>
      <div class="canvas-container">
        <VueTree
          :data="treeData"
          collapsed-way="clickTreeNode"
          default-node-key="name"
          :default-node-collapsed-style="{
            width: '60px',
            height: '30px',
            border: '1px dashed green',
            textAlign: 'center',
            lineHeight: '30px',
          }"
        />
      </div>
    </div>
    <div>
      <h3>使用连接节点收起、展开</h3>
      <div class="canvas-container">
        <VueTree
          :data="treeData"
          default-node-key="name"
          show-knot
          collapsed-way="clickKnotNode"
        />
      </div>
    </div>
    <div>
      <h3>自定义连接节点</h3>
      <div class="canvas-container">
        <VueTree
          :data="treeData"
          default-node-key="name"
          show-knot
          collapsed-way="clickKnotNode"
        >
        <template #knot="{node, data, index}">
          <div class="custom-knot">
            {{ node.numChildren }}
          </div>
        </template>
      </VueTree>
      </div>
    </div>
  </div>
</template>
<style scoped>
.canvas-container {
  width: 700px;
  height: 300px;
  border-radius: 5px;
  border: 1px solid gray;
}

.custom-knot {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  text-align: center;
  line-height: 15px;
  font-size: 12px;
  background-color: #00BFFF;
  color: #fff;
  cursor: pointer;
}
</style>